<!-- 汇流箱综合信息 -->
<template>
	<div class="dashboard-container">
		<page-header :headerTitle="$t('message.combinerBox.pageTitle')" :showWeather="false" />

		<div class="summary-panel">
			<!-- 逆变器状态统计 -->
			<div class="panel-section station-count">
				<div class="metric-item">
					<span class="metric-label">{{ $t('message.combinerBox.pageCombinerBoxTotal') }}</span>
					<span class="metric-value">13</span>
					<span class="metric-unit">{{ $t('message.combinerBox.pageUnit') }}</span>
				</div>
				<div class="metric-item">
					<span class="metric-label">{{ $t('message.combinerBox.pagePhone') }}</span>
					<span class="metric-value">13</span>
					<span class="metric-unit">{{ $t('message.combinerBox.pageUnit') }}</span>
				</div>
			</div>

			<div style="text-align: center">
				<img src="../../assets/image8.png" alt="分隔线" style="height: 5rem" />
			</div>

			<!-- 子站选择 -->
			<div class="panel-section">
				<p class="section-label">{{ $t('message.combinerBox.pageStation') }}</p>
				<el-select v-model="statusValue" :placeholder="$t('message.form.pageSelectHolder')" size="small" style="width: 100%" class="custom-select">
					<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>

			<div style="text-align: center">
				<img src="../../assets/image8.png" alt="分隔线" style="height: 5rem" />
			</div>

			<!-- 逆变器状态分类 -->
			<div class="panel-section">
				<p class="section-label">{{ $t('message.combinerBox.pageStatusClass') }}</p>
				<el-select v-model="statusValue" :placeholder="$t('message.form.pageSelectHolder')" size="small" style="width: 100%" class="custom-select">
					<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>

			<div style="text-align: center">
				<img src="../../assets/image8.png" alt="分隔线" style="height: 5rem" />
			</div>

			<!-- 参数设置 -->
			<div class="panel-section watt-metrics">
				<div class="metric-item">
					<span class="filter-label">{{ $t('message.combinerBox.pageDiscrete') }} >=</span>
					<el-input size="small" v-model="minWattOutput" class="metric-input custom-input" :placeholder="$t('message.form.pageInputHolder')" />
				</div>
				<div class="metric-item">
					<span class="filter-label">{{ $t('message.combinerBox.pageCurrent') }} <=</span>
					<el-input size="small" v-model="maxWattOutput" class="metric-input custom-input" :placeholder="$t('message.form.pageInputHolder')" />
				</div>
			</div>
		</div>

		<div class="table-container">
			<TableCustom :indexIsShow="true" :total="total" :hasToolbar="false" :tableData="tableData" :tableOption="tableOption">
				<template #operate="{ scope }">
					<el-button type="success" link @click="handleSet"> 设置 </el-button>
				</template>
			</TableCustom>
		</div>

		<el-dialog v-model="dialogVisible" width="55%" draggable overflow destroy-on-close>
			<el-form :model="dialogForm" :inline="true" :label-width="formLabelWidth">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="子站名称">
							<el-select v-model="dialogForm.name" :placeholder="$t('message.form.pageSelectHolder')" style="width: 150px" size="default">
								<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="设备选择">
							<el-select v-model="dialogForm.region" :placeholder="$t('message.form.pageSelectHolder')" style="width: 150px" size="default">
								<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="类型选择">
							<el-select v-model="dialogForm.region" :placeholder="$t('message.form.pageSelectHolder')" style="width: 150px" size="default">
								<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div>
				<h1></h1>
				<el-table :data="dialogForm.gridData" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
					<el-table-column property="date" label="点名" />
					<el-table-column property="name" label="值" />
					<el-table-column property="address" label="单位" />
					<el-table-column property="address" label="选择" />
				</el-table>
			</div>

			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="dialogVisible = false">提交</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import TableCustom from '../../components/table/index.vue';
import { onMounted, defineComponent, reactive, toRefs, computed } from 'vue';
import pageHeader from '../../components/pageHeader/index.vue';

export default defineComponent({
	name: 'combinerBox',

	components: { pageHeader, TableCustom },

	setup(props, { emit }) {
		const { t } = useI18n();
		const state = reactive({
			total: 0,
			pageSize: 10,
			pageNum: 1,
			statusValue: '1',
			statusOptions: [
				{ value: '1', label: '选项1' },
				{ value: '2', label: '选项2' },
				{ value: '3', label: '选项3' },
				{ value: '4', label: '选项4' },
			],
			minDailyHours: '',
			maxDailyHours: '',
			minWattOutput: '',
			maxWattOutput: '',
			tableData: [
				{
					name: '逆变器1',
				},
			],
			dialogVisible: false,
			formLabelWidth: '100px',
			dialogForm: {
				name: '',
				region: '',
				gridData: [
					{ date: '经度', name: '112', address: '115' },
					{ date: '纬度', name: '22', address: '25' },
					{ date: '容量', name: '1000', address: '1200' },
				],
			},
		});

		const router = useRouter();
		const oneStandsClick = (val: any) => {
			router.push({
				path: '/gatherControlManage/oneStandNews',
				query: { name: val.name },
			});
		};

		// table表头tableOption国际化
		const tableOption = computed(() => [
			{ prop: 'name', label: t('message.combinerBox.pageSubstation') },
			{ prop: 'name', label: t('message.combinerBox.pageCombinerBox') },
			{ prop: 'name', label: t('message.combinerBox.pageStatus') },
			{ prop: 'operate', label: t('message.table.pageOperate'), slotName: 'operate' },
		]);

		// 设置操作
		const handleSet = (row: any) => {
			console.log(row);
			state.dialogVisible = true;
		};

		onMounted(() => {});

		return {
			handleSet,
			tableOption,
			oneStandsClick,
			...toRefs(state),
		};
	},
});
</script>

<style lang="scss" scoped>
.summary-panel {
	width: 100%;
	display: grid;
	height: 6.5rem;
	padding: 0.3rem;
	grid-gap: 0.3rem;
	line-height: 2rem;
	margin-bottom: 0.5rem;
	background-color: #0a1a32;
	grid-template-columns: 4fr 1fr 5fr 1fr 7fr 1fr 7fr;
}

.panel-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 1rem;
}

.section-label {
	margin-bottom: 0.6rem;
	font-size: 14px;
	color: #fff;
	white-space: nowrap;
}

.metric-item {
	display: flex;
	align-items: center;
	white-space: nowrap;

	.metric-label {
		font-size: 1rem;
	}

	.metric-value {
		color: #5fcffa;
		font-weight: 500;
		margin: 0 1rem;
	}

	.metric-unit {
		margin-right: 1rem;
	}

	.filter-label {
		margin: 0 1rem;
		color: #fff;
		font-size: 1rem;
	}
}
</style>
